<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>御贝</title>

    <!-- styles here -->
    <link rel="shortcut icon" href="../favicon.ico">
    <link rel="stylesheet" href="../css/Public_CSS.css">
    <link rel="stylesheet" href="../css/swiper.min.css">
    <link rel="stylesheet" href="../css/mui.min.css">
    <link rel="stylesheet" href="../css/style.css">
</head>

<body>
    <div id="app" class="loan-page" v-cloak>
        <div class="header">
            <!-- 顶部宣传背景图 -->
            <div class="banner">
                <div class="swiper-wrapper">
                    <img v-for="banner in banners" class="swiper-slide" :src="banner.bannerImg">
                </div>
            </div>
            <!-- 流动通知信息 -->
            <div class="info-wrap">
                <p>
                    <i></i>恭喜尾号
                    <span id="num1"></span>的用户成功贷款
                    <span id="je1"></span>元</p>
                <p>
                    <i></i>恭喜尾号
                    <span id="num2"></span>的用户成功贷款
                    <span id="je2"></span>元</p>
                <p>
                    <i></i>恭喜尾号
                    <span id="num3"></span>的用户成功贷款
                    <span id="je3"></span>元</p>
                <p>
                    <i></i>恭喜尾号
                    <span id="num4"></span>的用户成功贷款
                    <span id="je4"></span>元</p>
            </div>
            <!-- 主分类导航 -->
            <div class="nav bg-block">
                <a href="loan-access.html">
                    <img src="../img/loan1/dkpg.png" alt="贷款评估">
                    <span>贷款评估</span>
                </a>
                <a href="apply.html?loanId=0">
                    <img src="../img/loan1/ljsq.png" alt="立即申请">
                    <span>立即申请</span>
                </a>
                <a href="../calc/index.html">
                    <img src="../img/loan1/hkys.png" alt="还款预算">
                    <span>还款预算</span>
                </a>
            </div>
        </div>

        <div class="scroll-y">

            <div class="main">
                <div class="ptitle">
                    <span></span>
                    <h1>贷款产品</h1>
                </div>
                <div class="product">
                    <ul>
                        <li v-for="item in types">
                            <a @click="link(item.loanTypeId)">
                                <img :src="item.loanTypeIcon" :alt="item.loanTypeName">
                                <span v-html="item.loanTypeName"></span>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="ad">
                <img src="../img/service/ad.png" alt="让金融简单一点">
            </div>
        </div>
    </div>

    <!-- scripts here -->
    <script src="../js/common.js" type="text/javascript"></script>
    <script src="../../public/js/loan/mui.min.js" type="text/javascript"></script>
    <script src="../js/jquery.min.js" type="text/javascript"></script>
    <script src="../js/vue.min.js" type="text/javascript"></script>
    <script src="../js/swiper.jquery.min.js" type="text/javascript"></script>
    <script>
        mui.init();
        var appId = GetQueryString("appId");
        $(function () {
            vm.loadAllType();
            vm.loadBanner();
            setInterval(vm.handelData(), 10000);
        });

        var vm = new Vue({
            el: "#app",
            data: {
                types: [],
                info: {},
                banners: [{
                        bannerImg: '../img/banner/dk_banner1.png'
                    },
                    {
                        bannerImg: '../img/banner/dk_banner2.png'
                    }
                ]
            },
            methods: {
                loadAllType: function () {
                    window.sessionStorage.setItem("appId", appId);
                    if (appId == undefined || appId == null) {
                        mui.alert("环境异常");
                        return;
                    }
                    vm.loadInfo();
                    $.ajax({
                        url: "/thmlfApi/avs/yb/loanTypes?appId=" + appId,
                        dataType: "JSON",
                        success: function (r) {
                            if (r.code == 200)
                                vm.types = r.result;
                            else
                                alert(r.message);
                        },
                        error: function (e) {
                            console.error("request error", e);
                            mui.alert("获取数据失败，请稍后重试");
                        }
                    })
                },
                handelData: function () {
                    var Num1 = '',
                        Num2 = '',
                        Num3 = '';
                    for (var i = 0; i < 4; i++) {
                        Num1 += Math.floor(Math.random() * 10);
                        Num2 += Math.floor(Math.random() * 10);
                        Num3 += Math.floor(Math.random() * 10);
                    }
                    document.getElementById("num1").innerText = Num1;
                    document.getElementById("num2").innerText = Num2;
                    document.getElementById("num3").innerText = Num3;
                    document.getElementById("num4").innerText = Num1;
                    document.getElementById("je1").innerText = (Math.floor(Math.random() * 20) + 30) *
                        10000 + '';
                    document.getElementById("je2").innerText = (Math.floor(Math.random() * 20) + 30) *
                        10000 + '';
                    document.getElementById("je3").innerText = (Math.floor(Math.random() * 20) + 30) *
                        10000 + '';
                    document.getElementById("je4").innerText = document.getElementById("je1").innerText;
                },
                link: function (typeId) {
                    if (typeId == undefined || typeId == null) {
                        mui.alert("环境异常");
                        return;
                    }
                    window.location.href = 'loan-item.html?typeId=' + typeId;
                },
                loadInfo: function () {
                    $.ajax({
                        url: '/thmlfApi/avs/yb/info?appId=' + appId,
                        success: function (r) {
                            if (r.code == 200) {
                                sessionStorage.setItem("infoName", r.result.infoName);
                                sessionStorage.setItem("infoTel", r.result.infoTel);
                                vm.info = r.result;
                            } else
                                alert(r.message);
                        }
                    });
                },
                tel: function () {
                    if (mui.os.ios == true || mui.os.wechat == true) {
                        window.location.href = 'tel:' + vm.info.infoTel;
                    } else {
                        mui.alert('咨询方式:' + vm.info.infoTel);
                    }
                },
                loadBanner: function () {
                    mui.ajax("http://www.028wkf.cn/app/banner/tag?appId=" + appId + "&tag=loan_top", {
                        dataType: 'json',
                        type: 'get',
                        success: function (data) {
                            if (data.code == 200)
                                if (data.result instanceof Array && data.result.length > 0) {
                                    vm.banners = data.result;
                                }
                        },
                        error: function () {

                        }
                    });
                }
            },
            updated: function () {
                var mySwiper = new Swiper('.banner', {
                    loop: true,
                    autoplay: 5000,
                    observer: true, //修改swiper自己或子元素时，自动初始化swiper
                    observeParents: true //修改swiper的父元素时，自动初始化swiper
                    // 如果需要分页器
                    // pagination: '.swiper-pagination',
                })
            }
        });
    </script>
</body>

</html>